<template>
  <view class="container">
    <u-button @click="chooseVideo" type="primary">选择视频</u-button>
    
    <view v-if="videoInfo.path" class="video-preview">
      <video :src="videoInfo.path" controls class="video"></video>
      <view class="video-info">
        <text>文件名: {{ videoInfo.name }}</text>
        <text>大小: {{ formatFileSize(videoInfo.size) }}</text>
      </view>
    </view>
    
    <view v-if="videoInfo.path" class="upload-btn">
      <u-button @click="uploadVideo" :loading="uploading" type="success">
        {{ uploading ? '上传中...' : '上传视频' }}
      </u-button>
    </view>
    
    <u-toast ref="uToast"></u-toast>
    <u-modal v-model="showProgress" :show-cancel-button="false" :show-confirm-button="false">
      <view class="progress-content">
        <u-loading mode="circle" size="40"></u-loading>
        <view class="progress-text">上传进度: {{ uploadProgress }}%</view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoInfo: {
        path: '',
        name: '',
        size: 0
      },
      uploading: false,
      uploadProgress: 0,
      showProgress: false
    };
  },
  methods: {
    // 选择视频
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        compressed: true,
        maxDuration: 60,
        success: (res) => {
          this.videoInfo = {
            path: res.tempFilePath,
            name: this.getFileName(res.tempFilePath),
            size: res.size
          };
        },
        fail: (err) => {
          this.$refs.uToast.show({
            title: '选择视频失败',
            type: 'error'
          });
        }
      });
    },
    
    // 上传视频到指定接口
    uploadVideo() {
      if (!this.videoInfo.path) {
        this.$refs.uToast.show({
          title: '请先选择视频',
          type: 'warning'
        });
        return;
      }
      
      this.uploading = true;
      this.showProgress = true;
      this.uploadProgress = 0;
      
      // 创建上传任务
      const uploadTask = uni.uploadFile({
        url: 'https://your-domain.com/api/common/uploadres', // 替换为实际接口地址
        filePath: this.videoInfo.path,
        name: 'resfile',
        formData: {
          restype: '10' // 资源类型，10表示视频
        },
        success: (uploadRes) => {
          const data = JSON.parse(uploadRes.data);
          if (data.code === 200) {
            this.$refs.uToast.show({
              title: '上传成功',
              type: 'success'
            });
            // 上传成功后的处理，如返回文件路径或ID
            console.log('上传成功:', data.data);
          } else {
            this.$refs.uToast.show({
              title: data.msg || '上传失败',
              type: 'error'
            });
          }
        },
        fail: (err) => {
          this.$refs.uToast.show({
            title: '上传失败: ' + err.errMsg,
            type: 'error'
          });
        },
        complete: () => {
          this.uploading = false;
          this.showProgress = false;
        }
      });
      
      // 监听上传进度
      uploadTask.onProgressUpdate((res) => {
        this.uploadProgress = res.progress;
      });
    },
    
    // 获取文件名
    getFileName(path) {
      return path.substring(path.lastIndexOf('/') + 1);
    },
    
    // 格式化文件大小
    formatFileSize(size) {
      if (size < 1024) {
        return size + ' B';
      } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(2) + ' KB';
      } else {
        return (size / (1024 * 1024)).toFixed(2) + ' MB';
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.video-preview {
  margin-top: 30rpx;
}

.video {
  width: 100%;
  height: 400rpx;
  border-radius: 10rpx;
}

.video-info {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
}

.video-info text {
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #606266;
}

.upload-btn {
  margin-top: 40rpx;
}

.progress-content {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #606266;
}
</style>